JS30 Day 3 筆記


Posted by GL on 2023-05-23

功能

製作一個即使濾鏡的功能,可以調整圖片的內距、模糊程度以及背景顏色,同時讓標題的 JS 兩個字顏色與圖片的背景顏色相同

Demo

step 1 : 定義並套入 CSS 變數

CSS 的前處理器(例如:SCSS 或 SASS),在建立 CSS 檔案前已將變數替換為實際的數值,因此無法透過 Javascript 去改變 CSS 前處理器中的變數。

而在原生的 CSS 中使用變數,優點是可以透過 Javascript 動態改變變數的數值,缺點是有些瀏覽器的版本尚未支援

// 建立 CSS 的變數
//:root{
//   --<varName>:<varValue>
// }

:root{
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}

// 使用 CSS 的變數 : var(--<varName>)
img{
padding: var(--spacing);
background: var(--base);
filter: blur(var(--blur));
}

// 讓標題的 JS 的顏色與圖片背景顏色相同
.hl{
color: var(--base);
}

step 2 : JS 監聽 input 元素,並更新 CSS 效果

  1. 取得頁面中的 input 元素,並在每個 input 元素掛上監聽事件 (change、mousemove)
// 取得頁面中的 input 元素
const inputs = document.querySelectorAll('.controls input')

// 對每個 input 元素監聽 change 事件 
inputs.forEach(input=>{
  input.addEventListener('change', handleChange)
})

// 對每個 input 元素監聽 mousemove 事件 
// 尤其像 input type = "color" ,就不會發生 change 事件)
inputs.forEach(input=>{
 input.addEventListener('mousemove',handleChange)
})
  1. 建立 function handleChange
function handleChange(){
  // 取得參數值的單位,如果沒有單位,設為空
  const suffix = this.dataset.sizing || ''

  // 設置 CSS 屬性
  // this.name : 參數的名稱
  // this.value : 參數的值
  // suffix : 參數的單位
  document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix)
}

HTML

利用 data-* 設置單位值 (因為有的 input 有單位,有的則沒有)

// 有單位的 input, 在標籤中設置:data-sizing: px
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
<input id="base" type="color" name="base" value="#ffc600">

CSS

filter

CSS 的 filter 濾鏡可以將模糊或颜色偏移等效果用於元素
filter:blur() => 高斯模糊,數值越小越清楚,越大越模糊


Javascript

1. NodeList 和 Array 區別

兩者區別在於可以使用的方法不同

  • NodeList 可以操作的方法有forEach()keys()length
  • Array 可以操作的方法除了上述之外,還包括 map()filter()pop()...

2. dataset

datasetgetAttribute 都可以取得 data-* 屬性,

// html
<div id="getdata" data-info="hello" data-number="888"></div>

// javascript
document.querySelector('#getdata').dataset.info // 輸出 hello
document.querySelector('#getdata ').getAttribute('data-number'); // 輸出 888

3. 利用 dataset.sizing 取得單位值

HTML

// 有單位的 input, 在標籤中設置:data-sizing: px
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
<input id="base" type="color" name="base" value="#ffc600">

Javascript

// 用 dataset 取得該標籤中所有的 data-*, 
// 而 dataset.sizing 意謂著取得 data-sizing 的值
// 如果有的話就將 suffix 賦予此值,如果沒有的話為空
const suffix = this.dataset.sizing || '';

4. 用 Javascript 改變 CSS 屬性 : style.setProperty

取得頁面的根元素:document.documentElementdocument.querySelector('html')document.querySelector(':root')

// 改變全域 CSS 變數的值
document.documentElement.style.setProperty('--base', '#000');

參考資料:


#JS 30







Related Posts

wsl 下的 linux crontab 沒有執行問題

wsl 下的 linux crontab 沒有執行問題

使用 Python 進行中斷點 step by step debug 除錯

使用 Python 進行中斷點 step by step debug 除錯

簡明 Python Pandas 入門教學

簡明 Python Pandas 入門教學


Comments